<%@ page import="com.car.entyti.Carpool" %>
<%@ page import="com.car.service.UserService" %>
<%@ page import="com.car.entyti.User" %>
<%@ page import="com.car.dao.DB" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<link type="text/css" href="<%= request.getContextPath()%>/css/index.css" rel="stylesheet">
<html>
<head>
    <title>主页</title>
</head>
<%-- 城市--%>
<link rel="stylesheet" href="<%= request.getContextPath()%>/css/kuCity.css">
<%@include file="components/base.jsp" %>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=24661721a13ef054b221f80ab69b36e8"></script>
<body id="body">

<%--head--%>



<%@include file="head.jsp" %>


<div style="display: flex">
    <div style="flex: 1;"></div>
    <div style="flex: 8; display: flex" class="index_top">

        <div class="left">
            <div style="flex: 4" id="i_input">
                <input style="display: inline-block;height: 30px; width: 210px" id="txtStart" type="text" name="title"
                       required
                       lay-verify="required" placeholder="出发地" autocomplete="off" class="layui-input search">
                <input style="display: inline-block;height: 30px; width: 210px" id="txtEnd" type="text" name="title"
                       required
                       lay-verify="required" placeholder="目的地" autocomplete="off" class="layui-input search3">

                <input style="width: 70px" value="查询" id="btnSearch" type="button" class="layui-btn layui-btn-sm"
                       onclick="search();"/>
            </div>

            <div id="allmap" style="margin-top: 10px;border: 1px solid gray"></div>
        </div>

        <div style="flex:6" class="right" id="test">
            <table style="width: 100%" class="table" id="infoTable" lay-filter="test">
            </table>
        </div>

    </div>
    <div style="flex: 1;"></div>
</div>


<%--分页--%>


</body>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });
</script>


<script type="text/html" id="barDemo">
    <a href="javascript:void(0)" class="layui-btn layui-btn-primary layui-btn-xs"
       lay-event="detail">查看</a>
    <%--    <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>--%>
</script>
<script src="//res.layui.com/layui/dist/layui.js?t=1621460603938"></script>
<script>
    layui.config({
        version: '1621460603938' //为了更新 js 缓存，可忽略
    });

    //加载模块
    layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
        //得到各种内置组件

        laypage = layui.laypage //分页
            , table = layui.table //表格
            , element = layui.element //元素操作
            , dropdown = layui.dropdown //下拉菜单


        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //执行一个 table 实例
        table.render({
            elem: '#infoTable'
            , height: 435
            , url: '<%= request.getContextPath() %>/json' //数据接口
            , title: '用户表'
            , page: false //开启分页
            , limit: 9
            , method: 'post'
            , parseData: function (res) {
                console.log(res);
                return {
                    "code": 0,
                    "msg": "",
                    "count": 50,
                    "data": res,
                }
            }
            , cols: [[ //表头

                , {field: 'id', title: '订单号', width: 100, sort: true,}
                , {field: 'usertype', title: '类型', width: 80}
                , {field: 'becity', title: '出发城市', width: 100}
                , {field: 'decity', title: '目的城市', width: 100}
                , {field: 'deptime', title: '出发时间', width: 180}
                , {field: 'motor_type', title: '汽车类型', width: 100}
                , {field: 'cost', title: '费用方式', width: 100}
                , {fixed: 'right', title: '操作', width: 80, align: 'center', toolbar: '#barDemo'}
            ]]
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                console.log(data);
                location.href = '<%=request.getContextPath()%>/Screen.jsp?id=' + data.id;

            } else if (layEvent === 'more') {
                //下拉菜单
                dropdown.render({
                    elem: this //触发事件的 DOM 对象
                    , show: true //外部事件触发即显示
                    , data: [{
                        title: '编辑'
                        , id: 'edit'
                    }, {
                        title: '删除'
                        , id: 'del'
                    }]
                    , click: function (menudata) {
                        if (menudata.id === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                //向服务端发送删除指令
                            });
                        } else if (menudata.id === 'edit') {
                            layer.msg('编辑操作，当前行 ID:' + data.id);
                        }
                    }
                    , style: 'margin-left: -45px; box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                })
            }
        });

    });
</script>
<%--地图--%>

<script type="text/javascript" src="<%= request.getContextPath()%>/js/index.js">
</script>
</html>
